<template>
<view class="container">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in list">
				<view class="swiper-item">
					<image :src="item.icon" mode="" style="width: 100%; height: 240px;"></image>
				</view>
			</swiper-item>
		</swiper>
		<swiper style="width: 100%;" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000">
					<swiper-item>
						<uni-section title="留言列表" type="line">
							<uni-list>
								<view @click="toPage()">
								<uni-list-item title="食堂1"></uni-list-item>
								</view>
								<view @click="toPage()">
								<uni-list-item title="食堂2"></uni-list-item>
								</view>
								<uni-list-item title="食堂3"></uni-list-item>
							</uni-list>
						</uni-section>
					</swiper-item>
					<swiper-item>

							<uni-grid :column="5" :showBorder="true">
								<uni-grid-item v-for="(item,index) in typelist">
									<view
										style="display: flex; flex-direction: column; align-items: center; justify-content: center;border:1px solid #ccc;">
										<image :src="item.icon" mode="widthFix" style="width: 100rpx;"></image>
										<view>{{item.typename}}</view>
									</view>
								</uni-grid-item>
							</uni-grid>
						</uni-section>
					</swiper-item>
				</swiper>
			
			<swiper :indicator-dots="true" style="height: 340px;">
						<swiper-item>
							<uni-section title="学校公告" type="square">
								<uni-list>
									<uni-list-item v-for="(item,index) in announcementlist" :title="item.title"
										:note="item.description" :rightText="item.date">
									</uni-list-item>
								</uni-list>
							</uni-section>
						</swiper-item>
						<swiper-item>
							<uni-section title="学校新闻" type="square">
								<uni-list>
									<uni-list-item v-for="(item,index) in newslist" :title="item.title" :note="item.content"
										:rightText="item.date">
									</uni-list-item>
								</uni-list>
							</uni-section>
						</swiper-item>
					</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				announcementlist: [],
								newslist: [],
				list: [{
					"id": 1,
					"name": "食堂1",
					"icon": "/static/images/school2.jpg"
				}, {
					"id": 2,
					"name": "食堂2",
					"icon": "/static/images/school1.jpg"
				}, {
					"id": 3,
					"name": "食堂3",
					"icon": "/static/images/school3.jpg"
				}, {
					"id": 4,
					"name": "食堂4",
					"icon": "/static/images/school4.jpg"
				}
				],
				"typelist": [{
						"id": 1,
						"typename": "新闻",
						"icon": "/static/images/news.png"
					},
					{
						"id": 2,
						"typename": "公告",
						"icon": "/static/images/announcement.png"
					},
					{
						"id": 3,
						"typename": "同学",
						"icon": "/static/images/classmate.png"
							},
					{
						"id": 4,
						"typename": "电话",
						"icon": "/static/images/telephone.png"
					},
					{
						"id": 5,
						"typename": "留言",
						"icon": "/static/images/leaveword.png"
					}
					],
					"activeIndex":0,
					"newslist":[]
				// 	"liste":[{
						
				// 			"title":"食堂2"
				// 		},
					
					
					
				// 	{
				// 		"title":"食堂2"
				// 	},
				// 	{
				// 		"title":"食堂3"
				// 	},
				
				// ]
			}
		},
		onLoad() {
			this.loadDataone()
						this.loadDatatwo()
		},
		methods: {
			loadDataone() {
							uni.request({
								url: 'http://localhost:8090/freshmenapp/news/list',
								method: 'POST',
								data: {},
								success: res => {
									console.log(res.data.list);
									this.newslist = res.data.list
								}
							})
			
			
						},
						loadDatatwo() {
							uni.request({
								url: 'http://localhost:8090/freshmenapp/announcement/list',
								method: 'POST',
								data: {},
								success: res => {
									console.log(res.data.list);
									this.announcementlist = res.data.list
								}
							})
			
			
						},
					
					
			toPage() {
				uni.navigateTo({
					url: '../message/message'
				})
			}
		},
		}
</script>

<style>
	.container {
		
				font-size: 14px;
				line-height: 24px;
			}
		
			.a {
				margin: 10px;
			}
		
			.b {
				
				font-size: large;
			}
</style>
